<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>sisley首页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="iconfont/iconfont.css">
    

</head>
<body>

    <script src="./js/swiper-bundle.min.js"></script> 
    <script src="js/jquery-1.9.1.min.js"></script>


    <div class="mengceng"></div>



    <div class="loginBox">
        <!-- 登录 -->
    <div class="outside">
        <div id="login">
            <div class="login-head"></div>
        <!-- .............x............... -->
            <div class="text-right">
                <span>
                    <i class="iconfont icon-cross-fill"></i>
                </span>
            </div>
            <h2>登录</h2>
            <div class="login-box">
                <span class="login-on tab-box ">
                    手机验证码登录
                </span>
                <span class="tab-box" >密码登录</span>
              <div class="small-box login-active">
                <div> <input type="text" placeholder="手机号码" class="login-phone">
                    <span class="no-vip">您不是Sisley会员，请注册</span>
                </div>
                <div> <input type="text" placeholder="手机验证码"  class="login-code"> 
                <span class="send-code">发送验证码</span>
                </div>
                <span class="short-img">短信验证码校验失败，请重试</span>
                <div class="rignt-login">
                    <span class="login-span">登录</span>
                </div>
              </div>
              <div class="pass-box">
                <div><input type="text" placeholder="邮箱/手机号码" class="login-email">
                    <span class="no-emill">登录账号必须为手机号或邮箱</span>
                </div>
                <div><input type="password" placeholder="密码" class="login-pass
                    "></div> 
                <div class="box-rem">
                    <div class="rem-left">
                      <span><input type="checkbox" checked='checked'></span>
                        <span>记住账号</span>
                    </div>
                    <div class="rem-right"><span>忘记密码？</span></div>
                </div>
                <div class="rignt-login login-top">
                    <span class="login-in">登录</span>
                </div>
             </div>
             
             <!-- <div class="rignt-login">
                <span>登录</span>
            </div> -->
            </div>
    
            <p>
                创建账户
           </p>     
           <p>
               通过手机号码创建账户，您将成为Sisley法国希思黎会员。
           </p>
           <div class="under-phone"> <input type="text" placeholder="手机号码" class="under-phone"> </div>
           <div class="rignt-member">
            <span class="become-vip">成为会员</span>
            
             </div>
    
               <div class="kongbai"></div>
        </div>
    </div>
        
    </div>



     <!-- 头部 -->
     <div class="swiper-container">
         <div class="nav">
            <div class="nav-top">

                <!-- 左边 -->
                <div class="nt-one">
                    <a href="javascript:;">
                        <img src="./images/Untitled-1.svg" alt="">
                    </a>
                    <div class="nt-one-txt">
                        <p>My Sisley Club</p>
                    </div>
                </div>

                <!-- 中间 -->
                <div class="nt-two">
                  <img src="./images/topdark.svg" alt="">
                  <img src="./images/topwhite.svg" alt="">
                  </div>


                 <!-- 右侧 -->
                 <div class="nt-three">
                    <i class="iconfont icon-erji"></i>
                    <i class="iconfont icon-search
                    "></i>
                    <i class="iconfont icon-geren"></i>
                    <i class="iconfont icon-gouwudai"></i>
                 </div>

               
            </div>
            <div class="nav-bottom">
                 <div class="navbtm-wrap">
                    <!-- 左侧的导航 -->
                    <div class="nb-left">
                         <div class="nb-left1">
                               <a href="javascript:;" class="line xixi">护肤</a>
                               <div class="pull-one">
                                <div class="po-wrap">
                                     <ul class="po-ul">
                                       <li>
                                         <span>面部护理</span>
                                         <div class="content">
                                            <p>卸妆&清洁</p>
                                            <p>去角质&面膜</p>
                                            <p>化妆水</p>
                                            <p>眼唇护理</p>
                                            <p>面霜</p>
                                            <a href="html/list.html"><p>精华</p> </a>
                                            <p>日间护理</p>
                                            <p>夜间护理</p>
                                            <p>修护</p>
                                            <p>美肤</p>
                                            <p>男士护理</p>
                                         </div>
                                       </li>
                                       <li>
                                         <span>身体护理</span>
                                         <div class="content">
                                            <p>抗老护理</p>
                                            <p>美颈护理</p>
                                            <p>美胸护理</p>
                                            <p>紧致肌肤</p>
                                            <p>保湿滋润</p>
                                            <p>塑身纤体</p>
                                            <p>身体磨砂</p>
                                            <p>手部&美甲护理</p>
                                         </div>
                                       </li>
                                       <li>
                                         <span>防晒</span>
                                         <div class="content">
                                            <p>面部防晒</p>
                                            <p>隔离防晒</p>
                                            <p>晒后修复</p>
                                            <p>防晒指数50+</p>
                                            <p>防晒指数30</p>
                                         </div>
                                       </li>
                                       <li>
                                         <span>肌肤问题</span>
                                         <div class="content">
                                            <p>抗衰老</p>
                                            <p>淡纹</p>
                                            <p>紧致</p>
                                            <p>保湿</p>
                                            <p>滋养</p>
                                            <p>焕亮肌肤</p>
                                            <p>美白淡斑</p>
                                            <p>纤体护理</p>
                                            <p>排浊</p>
                                            <p>局部护理</p>
                                         </div>
                                       </li>
                                       <li>
                                         <span>精选</span>
                                         <div class="content">
                                            <p>官网臻享</p>
                                            <p>新品</p>
                                            <p>必入星品</p>
                                            <p>抗皱修活系列</p>
                                            <p>致臻系列</p>
                                            <p>黑玫瑰系列</p>
                                            <p>全能乳液</p>
                                            <p>赋活系列</p>
                                            <p>藏红花系列</p>
                                            <p>修护系列</p>
                                            <p>植物净颜系列</p>
                                            <p>焕白系列</p>
                                            <p>抗皱修活防晒系列</p>
                           
                                         </div>
                                       </li>
                                     </ul>
                                </div>
                            </div>
                         </div>
                         <div class="nb-left2">
                           <a href="javascript:;" class="line">彩妆</a>
                           <div class="pull-two">
                            <div class="pt-wrap">
                                 <ul class="pt-ul">
                                   <li>
                                     <span>底妆</span>
                                     <div class="content">
                                        <p>粉底</p>
                                        <p>遮瑕</p>
                                        <p>高光</p>
                                        <p>妆前</p>
                                        <p>蜜粉&散粉</p>
                                        <p>腮红&修容</p>
                                        <p>面部化妆刷</p>
                                      
                                     </div>
                                   </li>
                                   <li>
                                     <span>眼妆</span>
                                     <div class="content">
                                        <p>眼部遮瑕</p>
                                        <p>眼线笔</p>
                                        <p>睫毛膏</p>
                                        <p>眼影</p>
                                        <p>眉笔</p>
                                        <p>眉膏</p>
                                        <p>眼部化妆刷</p>
                                       
                                     </div>
                                   </li>
                                   <li>
                                     <span>唇妆</span>
                                     <div class="content">
                                        <p>唇线笔</p>
                                        <p>唇膏</p>
                                        <p>唇釉</p>
                                       
                                     </div>
                                   </li>
                                   <li>
                                     <span>妆容问题</span>
                                     <div class="content">
                                        <p>抗衰老</p>
                                        <p>黑眼圈</p>
                                        <p>光采美肌</p>
                                        <p>无暇美肌</p>
                                        <p>柔焦妆感</p>
                                        <p>亮泽妆感</p>
                                        <p>丰盈双唇</p>
                                        <p>放大双眸</p>
                                        <p>眉部</p>
                                        
                                     </div>
                                   </li>
                                   <li>
                                     <span>精选</span>
                                     <div class="content">
                                        
                                        <p>必入星品</p>
                                        <p>烟熏妆</p>
                                        <p>Sisley妆容</p>
                                        <p>无暇美肌</p>
                                        <p>修容</p>
                                        
                       
                                     </div>
                                   </li>
                                 </ul>
                            </div>
                        </div>
                         </div>
                         <div class="nb-left3">
                           <a href="javascript:;" class="line">香氛</a>
                           <div class="pull-three">
                            <div class="ptr-wrap">
                                 <ul class="ptr-ul">
                                   <li>
                                     <span>面部护理</span>
                                     <div class="content">
                                        <p>卸妆&清洁</p>
                                        <p>去角质&面膜</p>
                                        <p>化妆水</p>
                                        <p>眼唇护理</p>
                                        <p>面霜</p>
                                        <p>精华</p>
                                        <p>日间护理</p>
                                        <p>夜间护理</p>
                                        <p>修护</p>
                                        <p>美肤</p>
                                        <p>男士护理</p>
                                     </div>
                                   </li>
                                   <li>
                                     <span>身体护理</span>
                                     <div class="content">
                                        <p>抗老护理</p>
                                        <p>美颈护理</p>
                                        <p>美胸护理</p>
                                        <p>紧致肌肤</p>
                                        <p>保湿滋润</p>
                                        <p>塑身纤体</p>
                                        <p>身体磨砂</p>
                                        <p>手部&美甲护理</p>
                                     </div>
                                   </li>
                                   <li>
                                     <span>防晒</span>
                                     <div class="content">
                                        <p>面部防晒</p>
                                        <p>隔离防晒</p>
                                        <p>晒后修复</p>
                                        <p>防晒指数50+</p>
                                        <p>防晒指数30</p>
                                     </div>
                                   </li>
                                   <li>
                                     <span>肌肤问题</span>
                                     <div class="content">
                                        <p>抗衰老</p>
                                        <p>淡纹</p>
                                        <p>紧致</p>
                                        <p>保湿</p>
                                        <p>滋养</p>
                                        <p>焕亮肌肤</p>
                                        <p>美白淡斑</p>
                                        <p>纤体护理</p>
                                        <p>排浊</p>
                                        <p>局部护理</p>
                                     </div>
                                   </li>
                                   <li>
                                     <span>精选</span>
                                     <div class="content">
                                        <p>官网臻享</p>
                                        <p>新品</p>
                                        <p>必入星品</p>
                                        <p>抗皱修活系列</p>
                                        <p>致臻系列</p>
                                        <p>黑玫瑰系列</p>
                                        <p>全能乳液</p>
                                        <p>赋活系列</p>
                                        <p>藏红花系列</p>
                                        <p>修护系列</p>
                                        <p>植物净颜系列</p>
                                        <p>焕白系列</p>
                                        <p>抗皱修活防晒系列</p>
                       
                                     </div>
                                   </li>
                                 </ul>
                            </div>
                        </div>
                         </div>
                         <div class="nb-left4">
                           <a href="javascript:;" class="line">护发</a>
                         </div>
                         <div class="nb-left5">
                           <a href="javascript:;" class="line">官网臻享</a>
                         </div>
                         <div class="nb-left6">
                           <a href="javascript:;" class="line">奢护服务预约</a>
                         </div>
                    </div>


                    <!-- 右侧的图标 -->
                    <div class="nb-right">
                      <a href="javascript:;" class="nbr-hover">
                        <!-- dark -->
                        <img src="./images/dark.svg" alt="">
                        <!-- white -->
                        <img src="./images/white.svg" alt="">
                      </a>
                    </div>
                    
                     <!-- 右侧吸顶的图标 -->
                     <div class="nb-right-two">
                      <i class="iconfont icon-erji"></i>
                      <i class="iconfont icon-search
                      "></i>
                      <i class="iconfont icon-geren"></i>
                      <i class="iconfont icon-gouwudai"></i>
                     </div>




                  </div>
            </div>
         </div>
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="https://assets.sisley.com.cn//cms/upload/300071/5f74b9d3b9460.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="https://assets.sisley.com.cn//cms/upload/300071/5f74b9fcd6c35.jpg" alt="">
          </div>
          <div class="swiper-slide">
            <img src="https://assets.nightcherry.com//cms/upload/300071/5f3e572cdd0e9.jpg" alt="">
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    

      <!-- /* 中间横线 */ -->
    <div class="mid-line">
      <div class="ml-wrap">

      </div>
    </div>



    <!-- 分类 -->
    <div class="classify">
       <div class="cla-wrap">
           <!-- 护肤 -->
          <div class="cla-hufu">
              <div class="hufu-inner">
                <img src="./images/classifyone.jpg" alt="">
              </div>
              <span>护肤</span>
          </div>
          <!-- 彩妆 -->
          <div class="cla-caizhuang">
                <div class="caizhuang-inner">
                  <img src="./images/classifytwo.jpg" alt="">
                </div>
                <span>彩妆</span>
          </div>
          <!-- 香氛 -->
          <div class="cla-xiangfen">
               <div class="xiangfen-inner">
                 <img src="./images/classifythree.jpg" alt="">
               </div>
               <span>香氛</span>
          </div>
          <!-- 护发 -->
          <div class="cla-hufa">
                <div class="hufa-inner">
                  <img src="./images/classifyfour.jpg" alt="">
                </div>
                <span>护发</span>
          </div>
       </div>
    </div>

      <!-- /* 中间横线 */ -->
      <div class="mid-line">
        <div class="ml-wrap">
  
        </div>
      </div>



      <!-- 中间大图部分 -->
    <div class="bigpic">
      <div class="bp-wrap">
        <div class="bp-wrap-left">
          <div class="bp-wrap-one">
              <div class="bpo-one">
                <img src="./images/bigpicone.png" alt="">
              </div>
              <a href="javascript:;" class="bpo-one-txt">
                <h3>法国希思黎抗皱修活御致臻颜霜</h3>
                <h4>时光见证卓越 再现驻颜传奇</h4>
              </a>
              <a href="javascript:;" class="arrow one-arrow">
                <span>立即搜索</span>
                <i class="iconfont icon-xiangyou"></i>
                <i class="twoarr">></i>
              </a>
          </div>
          <div class="bp-wrap-three">
            <div class="bpo-three">
              <img src="./images/bigpicthree.png" alt="">
            </div>
            <a href="javascript:;" class="bpo-three-txt">
              <h3>法国希思黎抗皱修活精华水</h3>
              <h4>加乘润养 提升肌底吸收力</h4>
            </a>
            <a href="javascript:;" class="thr-arrow">
              <span>立即搜索</span>
              <i class="iconfont icon-xiangyou"></i>
              <i class="twoarr3">></i>
            </a>
          </div>
        </div>
        <div class="bp-wrap-right">
          <div class="bp-wrap-two">
            <div class="bpo-two">
              <img src="./images/bigpictwo.png" alt="">
            </div>
            <a href="javascript:;" class="bpo-two-txt">
              <h3>法国希思黎抗皱修活精华水</h3>
              <h4>加乘润养 提升肌底吸收力</h4>
            </a>
            <a href="javascript:;" class="two-arrow">
              <span>立即搜索</span>
              <i class="iconfont icon-xiangyou"></i>
              <i class="twoarr2">></i>
            </a>
          </div>
          <div class="bp-wrap-four">
            <div class="bpo-four">
              <img src="./images/bigpicfour.png" alt="">
            </div>
            <a href="javascript:;" class="bpo-four-txt">
              <h3>法国希思黎抗皱修活精华水</h3>
              <h4>加乘润养 提升肌底吸收力</h4>
            </a>
            <a href="javascript:;" class="four-arrow">
              <span>立即搜索</span>
              <i class="iconfont icon-xiangyou"></i>
              <i class="twoarr4">></i>
            </a>
          </div>
        </div>
      </div>
    </div>






    <!-- 首页第二部分 -->
    <div class="starTitle">
        <img src="images/star.png" alt="">
    </div>
    <div class="starBox">
        <ul class="allStar all1">
            <!-- <li>
                <div class="partImg">
                            <img src="https://assets.sisley.com.cn/upload/materials/pdp/headimgs/114100_01.jpg?x-oss-process=image/resize,w_900/quality,q_95" alt="">
                            <img src="https://assets.sisley.com.cn/upload/materials/pdp/headimgs/114100_02.jpg?x-oss-process=image/resize,w_900/quality,q_95" alt="">
                        </div>
                        <a href="javascript:;">
                        <h3>希思黎全能乳液125ml</h3>
                        </a>
                        <div class="partTxt">
                            <p class="txt1">一瓶多效</p>
                            <p>￥<span>${ele.goods_id}</span> </p>
                        </div>
            </li> -->
            
        </ul>
       
    </div>
    <div class="starBtn">
        <div class="starNext next1">
            <i class="iconfont icon-xiangyou"></i>
        </div>
        <div class="starNum">
            <span class="nowNum now1">1</span>/
            <span class="allNum">13</span>
        </div>
        <div class="starPrev prev1">
            <i class="iconfont icon-xiangzuo"></i>
        </div>
    </div>

    <!-- 换季 -->
    <div class="starTitle">
        <img src="images/change.png" alt="">
    </div>
    <div class="starBox">
        <ul class="allStar all2">
            <!-- <li>
                <div class="partImg">
                            <img src="https://assets.sisley.com.cn/upload/materials/pdp/headimgs/114100_01.jpg?x-oss-process=image/resize,w_900/quality,q_95" alt="" >
                            <img src="https://assets.sisley.com.cn/upload/materials/pdp/headimgs/114100_02.jpg?x-oss-process=image/resize,w_900/quality,q_95" alt="" >
                        </div>
                        <a href="javascript:;">
                        <h3>希思黎全能乳液125ml</h3>
                        </a>
                        <div class="partTxt">
                            <p class="txt1">一瓶多效</p>
                            <p>￥<span>${ele.goods_id}</span> </p>
                        </div>
            </li> -->
            
        </ul>
       
    </div>
    <div class="starBtn">
        <div class="starNext next2">
            <i class="iconfont icon-xiangyou"></i>

        </div>
        <div class="starNum">
            <span class="nowNum now2">1</span>/
            <span class="allNum"> 13</span>
        </div>
        <div class="starPrev prev2">
            <i class="iconfont icon-xiangzuo"></i>
        </div>
    </div>
    

    <!-- 奢宠予你 -->
    <div class="starTitle">
        <img src="images/for.png" alt="">
    </div>
    <div class="foryou">
        <div class="bigfor big1">
            <img src="https://assets.nightcherry.com//cms/upload/300071/5f3e5b87b3018.jpg" alt="香氛">
            <p>法国希思黎香氛代表着充满诗意的嗅觉感受和精致摩登的现代风格。</p>
            <div class="txtfor">香氛</div>
            <div class="mengfor m1"></div>
        </div>
        <div class="bigfor big2">
            <img src="https://assets.nightcherry.com//cms/upload/300071/5f3e5ac1224a9.png" alt="">
            <p>法国希思黎睿秀护发系列提供男女皆适用的有效护发产品。</p>
            <div class="txtfor">护发</div>
            <div class="mengfor m2"></div>
        </div>
    </div>
    <div class="france">
        <h2>法国希思黎</h2>
        <p>Sisley法国希思黎
            <br>
            将植物学专业知识运用于美容产品
        </p>
        <span>查看更多</span>
    </div>
    <div class="layout">
        <p>自1976年开始，Sisley法国希思黎以其独特的护肤品致敬植物美容学。</p>
        <p>
            不断寻求创新，提取植物精粹，得到强大的活性成分作为配方核心，大受消费者欢迎。如明星单品全能乳液和抗老臻品抗皱修活御致臻颜霜。这个家族企业打造了一种全新的美容方式，不仅提供面部护理产品、保湿滋润亦或紧致肌肤的身体护理产品，还有香氛产品。Sisley法国希思黎将专有技能与专业知识体现在每个产品系列之中：卸妆、防晒、护发、抗老、保湿等，以便为客户提供优质的个性化建议。</p>
            <p>Sisley法国希思黎的创始人修伯特与伊莎贝尔·多纳诺的艺术世界对品牌产生了深远影响。他们力图通过自己的作品来传递感情与例外，不趋于主流的美妆趋势，希思黎的彩妆系列产品以品质著称：将希思黎优秀的专业护肤知识运用于彩妆中。请为这些满足所有肌肤与美容需求的高品质产品着迷吧。</p>
            <span>收起</span>
    </div>

    <!-- 返回顶部 -->
    <div class="return">
        <i class="iconfont icon-xiangxia"></i>
    </div>
    
    
    
    <div class="footer">
        <ul>
            <li>
                <img src="images/icon-letter.d0b20997.svg" alt="">
                <p>免运费</p>
            </li>
            <li>
                <img src="images/icon-clock.0bb0dce6.svg" alt="">
                <p>7天退换</p>
            </li>
            <li>
                <img src="images/icon-cup.faa0fbc0.svg" alt="">
                <p>免费试用装</p>
            </li>
            <li>
                <img src="images/icon-check.42da3d7f.svg" alt="">
                <p>官网臻享</p>
            </li>
            <li>
                <img src="images/icon-orchid.23274373.svg" alt="">
                <p>会员中心</p>
            </li>
            <li>
                <img src="images/icon-lock.cd08a35d.svg" alt="">
                <p>安全支付</p>
            </li>
        </ul>
    </div>
    <div class="bottom">
        <div class="botCon">
            <div class="upbot">
                <div class="smallup botimg">
                    <img src="https://www.sisley.com.cn/img/footer-sisley-logo.8be96061.svg" alt="">
                    <p class="botTxt">来自法国的高科技植物精粹品牌，100%官方正品保证。秉承安全，有效，愉悦的品牌精髓，为您臻选高端护肤、彩妆、香氛、护发产品。</p>
                </div>
                <div class="smallup botserve">
                    <p>我们的服务</p>
                    <a href="javascript:;">法国希思黎至臻坊会员</a>
                    <a href="javascript:;">星品体验</a>
                    <a href="javascript:;">尊贵礼盒</a>
                </div>
                <div class="smallup country">
                    <p>国家或地区</p>
                    <div class="counKu">
                        <input type="text" placeholder="中国">
                        <i class="iconfont icon-xiangxia cc"></i>
                    </div>
                    
                    <ul>
                        <li>
                            <a href="javascript:;">德国</a>
                        </li>
                        <li>
                            <a href="javascript:;">英国</a>
                        </li>
                        <li>
                            <a href="javascript:;">美国</a>
                        </li>
                        <li>
                            <a href="javascript:;">澳大利亚</a>
                        </li>
                        <li>
                            <a href="javascript:;">奥地利</a>
                        </li>
                        <li>
                            <a href="javascript:;">比利时(FR)</a>
                        </li>
                        <li>
                            <a href="javascript:;">中国</a>
                        </li>
                        <li>
                            <a href="javascript:;">巴西</a>
                        </li>
                        <li>
                            <a href="javascript:;">加拿大</a>
                        </li>
                        <li>
                            <a href="javascript:;">加拿大(FR)</a>
                        </li>
                        <li>
                            <a href="javascript:;">丹麦</a>
                        </li>
                        <li>
                            <a href="javascript:;">西班牙</a>
                        </li>
                        <li>
                            <a href="javascript:;">德国</a>
                        </li>
                        <li>
                            <a href="javascript:;">法国</a>
                        </li>
                        <li>
                            <a href="javascript:;">希腊</a>
                        </li>
                        <li>
                            <a href="javascript:;">中国香港</a>
                        </li>
                        <li>
                            <a href="javascript:;">意大利</a>
                        </li>
                        <li>
                            <a href="javascript:;">日本</a>
                        </li>
                        <li>
                            <a href="javascript:;">南韩</a>
                        </li>
                        <li>
                            <a href="javascript:;">马来西亚</a>
                        </li>
                        <li>
                            <a href="javascript:;">中东</a>
                        </li>
                        <li>
                            <a href="javascript:;">墨西哥</a>
                        </li>
                        <li>
                            <a href="javascript:;">荷兰</a>
                        </li>
                        <li>
                            <a href="javascript:;">波兰</a>
                        </li>
                        <li>
                            <a href="javascript:;">葡萄牙</a>
                        </li>
                        <li>
                            <a href="javascript:;">俄国</a>
                        </li>
                        <li>
                            <a href="javascript:;">瑞士</a>
                        </li>
                        <li>
                            <a href="javascript:;">中国台湾</a>
                        </li>
                        <li>
                            <a href="javascript:;">泰国</a>
                        </li>
                        <li>
                            <a href="javascript:;">乌克兰</a>
                        </li>
                    </ul>
                </div>
                <div class="smallup guanzhu">
                    <p>关注我们</p>
                    <span><i class="iconfont icon-weibo"></i></span>
                    <span class="wei"><i class="iconfont icon-weixin"></i>
                        <div class="ma">
                            <img src="https://www.sisley.com.cn/img/wechat.e263aea3.png" alt="">
                        </div>
                    </span>
                    
                </div>
            </div>
            <div class="upbot">
                <div class="smallup ">
                    <p>搜索</p>
                    <div class="botSearch">
                        <input type="text">
                    <i class="iconfont icon-search"></i>
                    </div>

                    <div class="bigPos">
                        <div class="cha">
                            <button>
                                <i class="iconfont icon-cross-fill"></i>
                            </button>
                            
                        </div>
                        <div class="bigPos-search">
                            <input type="text">
                            <i class="iconfont icon-search"></i>
                        </div>
                        <div class="bigPos-content">
                            <p class="pos-hotp">热门搜索</p>
                            <div class="contDemo">
                                <span>S面霜</span>
                                <span>抗皱修活御致臻颜霜</span>
                                <span>全能乳液</span>
                                <span>黑玫瑰焕采精华霜</span>
                                <span>花香润肤水</span>
                                <span>抗皱修活御致眼唇霜</span>
                            </div>
                            <div class="contDemo">
                                <span>日间呵护精华乳</span>
                                <span>黑玫瑰珍宠滋养精华油</span>
                                <span>致臻夜间修护眼部精华露</span>
                                <span>轻柔粉底液</span>
                                
                            </div>

                            
                            <p class="pos-hotp">畅销榜单</p>
                            
                            <div class="hotTab">
                                <div class="samllTab">
                                    <div class="leftTab">
                                        <img src="https://assets.sisley.com.cn/config/9nUjhTRuzFog26JudABMF4r2ASewx3xLrZq6Md0s.jpeg" alt="">
                                    </div>
                                    <div class="rightTab">希思黎抗皱修活御致臻颜霜</div>
                                </div>
                                <div class="samllTab">
                                    <div class="leftTab">
                                        <img src="https://assets.sisley.com.cn/config/mcTpeR1QGiRJAgx8QQLAyoyd1oNBfeRTChtVrAZc.jpeg" alt="">
                                    </div>
                                    <div class="rightTab">希思黎全能乳液 125ml</div>
                                </div>
                            </div>
                            <div class="hotTab">
                                 <div class="samllTab">
                                    <div class="leftTab">
                                        <img src="https://assets.sisley.com.cn/config/L5vCOyOo6BM7ogY7oD26toLHCRtlFP4YkFYmnsJZ.jpeg" alt="">
                                    </div>
                                    <div class="rightTab">希思黎抗皱修活御致眼唇霜</div>
                                </div>
                                <div class="samllTab">
                                    <div class="leftTab">
                                        <img src="https://assets.sisley.com.cn/config/V8jRd6fRN68raqZEzPTIINsQ8lHNi0rGXZZ7m5uD.jpeg" alt="">
                                    </div>
                                    <div class="rightTab">希思黎黑玫瑰焕采精华霜</div>
                                </div>
                            </div>
                            <div class="hotTab">
                                 <div class="samllTab">
                                    <div class="leftTab">
                                        <img src="https://assets.sisley.com.cn/config/L53sjBMPiZ34erSj64yIyD0dR5JhO6Ll1P7mEdhC.jpeg" alt="">
                                    </div>
                                    <div class="rightTab">希思黎魅惑口红</div>
                                </div>
                                <div class="samllTab">
                                    <div class="leftTab">
                                        <img src="https://assets.sisley.com.cn/config/nvpoRWGCFSvibPTxBjc3lkJygG3SobaIW1Uz0DmI.jpeg" alt="">
                                    </div>
                                    <div class="rightTab">希思黎花香润肤水 250ml</div>
                                </div>
                            </div>

                            
                        </div>
                    </div>
                    
                </div>
                <div class="smallup botserve">
                    <p>需要帮助</p>
                    <a href="javascript:;">常见问题</a>
                </div>
                <div class="smallup botContact">
                    <p>客户服务</p>
                    <span>咨询官网在线美容顾问，周一至周日，9:00-23:00</span>
                    <input type="button" value="联络我们">
                </div>
            </div>
            
        </div>
    </div>

    <div class="last">
        <div class="lastBox last1">
            <a href="javascript:;">条款与条件</a>
            <a href="javascript:;">法律声明</a>
            <a href="javascript:;">隐私条款</a>
        </div>
        <div class="lastBox last2">
            <ul>
                <li>©2020 sisley希思黎贸易有限公司 保留所有权利</li>
                <li>
                    <a href="javascript:;">
                        <img src="images/download.png" alt="">
                        沪公网安备 31010602004456号
                    </a>
                </li>
                <li>
                    <img src="https://www.sisley.com.cn/img/i_copyright_new.5e1afaf4.jpg" alt="">
                    上海工商
                </li>
                <li>
                    <a href="https://beian.miit.gov.cn/">沪ICP备09011489号-15</a>
                </li>
            </ul>
            
        </div>
    </div>

    <script src="js/ajax.js"></script>
    
    
    <script>
        var aAllPart = document.querySelectorAll('.allStar')

        ajax({
            url:'server/goodsChange.php',
            data: {
                pagenum: 1,
                pagesize: 15
            },
            success (res) {
                let arr = JSON.parse(res)
                console.log(arr)

                arr.data.forEach(function (ele, index) {
                    let str = `<li>
                <div class="partImg">
                                <img data-id = "${ele.goods_id}" src="${ele.goods_bigPic2}" alt="" >
                            <div class = "aa">
                                <img data-id = "${ele.goods_id}" src="${ele.goods_bigPic1}" alt="">
                            </div>
                        </div>
                        <a href="javascript:;">
                        <h3>${ele.goods_name}</h3>
                        </a>
                        <div class="partTxt">
                            <p class="txt1">一瓶多效</p>
                            <p>￥<span>${ele.goods_price}</span> </p>
                        </div>
            </li>`
            
                aAllPart.forEach(function (ele, index) {
                    ele.innerHTML += str
                })
            })
            
            }
            
        })
        aAllPart.forEach(function(ele,index){

        
        ele.addEventListener('click', function (ev) {
    console.log(window.location.href)
    // 查看详情
    if (ev.target.tagName === 'IMG' || ev.target.tagName === 'H3' || ev.target.className === 'partImg') {
        console.log(ev.target)
        let id = ev.target.getAttribute('data-id')
        window.location.href = 'html/detalis.html?id='+id
        localStorage.setItem('detailId', id)
    }
})
})
    </script>
    
    
    <script src="js/index.js"></script>
    
</body>
</html>


